$( document ).ready(function (){
    fill_main_table(5);
    init_zone_fill_div()
    init_fashion_by_type_fill_div()
    init_fashion_by_name_fill_div()
    init_function_info_div()
});


let map_list = {
    0: {'name': '北海', 'zone': 0, 'show': true, 'flag': 0},
    1: {'name': '东地中海', 'zone': -1, 'show': true, 'flag': 0},
    2: {'name': '大西洋&西地中海', 'zone': -2, 'show': true, 'flag': 0},
    3: {'name': '西非', 'zone': -3, 'show': true, 'flag': 0},
    4: {'name': '南非', 'zone': -4, 'show': true, 'flag': 0},
    5: {'name': '东非', 'zone': -5, 'show': true, 'flag': 0},
    6: {'name': '阿拉伯西印度群岛', 'zone': -6, 'show': true, 'flag': 0},
    7: {'name': '东印度群岛&印度支那', 'zone': -7, 'show': true, 'flag': 0},
    8: {'name': '南亚', 'zone': -8, 'show': true, 'flag': 0},
    9: {'name': '东亚', 'zone': -9, 'show': true, 'flag': 0},
    10: {'name': '远东亚洲', 'zone': -10, 'show': true, 'flag': 0},
    11: {'name': '南太平洋', 'zone': -11, 'show': true, 'flag': 0},
    12: {'name': '南美洲、西美', 'zone': 0, 'show': true, 'flag': 1},
    13: {'name': '北美、东美、加勒比', 'zone': -1, 'show': true, 'flag': 1}
};
let fashion_info_dict ={0: {'name': '奢华', 'detail': ['工艺品', '辛香料', '香料'], 'interval': 19, 'sn': [8, 3],'show': true },
    1: {'name': '繁荣', 'detail': ['贵金属', '艺术作品', '宝石'], 'interval': 17, 'sn': [4, 1],'show': true},
    2: {'name': '开发', 'detail': ['工业制品', '矿石', '酒类或家畜'], 'interval': 13, 'sn': [2, 3],'show': true},
    3: {'name': '赞助', 'detail': ['嗜好品', '工艺品', '艺术作品'], 'interval': 11, 'sn': [2, 5],'show': true},
    4: {'name': '战争', 'detail': ['家畜', '武器', '枪支'], 'interval': 7, 'sn': [2, 2],'show': true},
    5: {'name': '洪水', 'detail': ['食品', '工业制品', '织物'], 'interval': 5, 'sn': [1, 0],'show': true},
    6: {'name': '传染病', 'detail': ['杂货', '药品', '纤维'], 'interval': 3, 'sn': [0, 2],'show': true},
    7: {'name': '节庆', 'detail': ['食品', ' 调味品', ' 染料'], 'interval': 2, 'sn': [1, 1],'show': true}
};


function init_function_info_div(){
    // 流行详细信息表
    console.log('加载流行详细信息')
    let div;
    div=document.getElementById('fashion_info')
    // console.log(div)
    let table=document.createElement('table');
    let row;
    table.id='function_info_table'
    row=table.insertRow(0)

    for (let i of ['名称','优惠商品','出现密度']){
        let td = document.createElement('th');
        td.className='function_info_head'
        td.innerText=i
        row.insertAdjacentElement('beforeend',td)
    }

    for(let i in fashion_info_dict){
        row=table.insertRow(-1)
        let td;
        td= document.createElement('td');
        td.className='function_info_data'
        td.innerText=fashion_info_dict[i]['name']
        row.insertAdjacentElement('beforeend',td)

        td= document.createElement('td');
        td.className='function_info_data'
        td.innerText=fashion_info_dict[i]['detail'].join('|')
        row.insertAdjacentElement('beforeend',td)

        td= document.createElement('td');
        td.className='function_info_data'
        td.innerText=fashion_info_dict[i]['interval']+'小时/次'
        row.insertAdjacentElement('beforeend',td)
    }

    div.insertAdjacentElement('beforeend',table)



}

function get_hour() {
    // var target = new Date('2023-01-24 00:00:00');
    let target = new Date('2023-01-24 00:00:00 GMT+9');
    let today = new Date(); // 这里的时区设置可能有问题
    return Math.floor((today - target) / 1000 / 60 / 60);

}

function get_fashion_by_hour(hour,flags,t='name') {
    // let fashion_filt=get_fashion_filt(); // 流行筛选
    let r=[];

    for (let k in fashion_info_dict){
        let v=fashion_info_dict[k];
        if (r.length>=2){
            break;
        }
        if (hour % v['interval'] === v['sn'][flags]){
        r.push(v[t])}
    }
    return r;
}

function get_zone_filt(){
    let r=[];
    let div=document.querySelector('div#hidden_by_zone');

    for (let k of div.querySelectorAll('input')){
        if (k.type==='checkbox'){
            if (k.checked){

                r.push(k.value)
            }
        }
    }

    if (r.length===0){
        for (let k in map_list){
            r.push(k)
        }
    }

    return r;
}
function get_fashion_filt(){
    let r=[];
    let div=document.querySelector('div#by_name');

    for (let k of div.querySelectorAll('input')){
        if (k.type==='checkbox'){
            if (k.checked){

                r.push(k.value)
            }
        }
    }
    if (r.length===0){
    for (let k in fashion_info_dict){
        r.push(fashion_info_dict[k]['name'])
    }}
    return r
}
function refresh_table(len){
    // len 是时间长度
    let iHour=get_hour();
    let ls=[['时间']];
    let zone_filt=get_zone_filt(); // 区域筛选

    let h=new Date().getHours(); // 当前的小时数
    for (let j of zone_filt){
        ls[0].push(map_list[j]['name'])
    }
    for (let i=0;i<=len-1;i++){
        let l=[String((h+i)%24)+'时'];
        for (let j of zone_filt){
            l.push(get_fashion_by_hour(iHour+i+map_list[j]['zone'],map_list[j]['flag']))
        }
        ls.push(l)
    }
    // console.log(ls)
    return ls;
}

function fill_main_table(len){
    // 先检查删除原有的表
    // len=1
    if (!len){
        // console.log("len")
        len=Number(document.querySelector('input#fill_time').value)
        // console.log(len)
        // console.log(typeof len)
    }

    if (document.querySelector('table#main_table')){
        document.querySelector('table#main_table').remove()
    }

    if (document.querySelector('input#fashion_type_apply_sel_bnt') && ! document.querySelector('div#by_type').hidden ){
        apply_sel() // 应用商品筛选
    }

    let ls=refresh_table(len);

    let table= document.createElement('table');
    table.id='main_table'
    // let th=table.createTHead();
    let row;
    let fashion_filt=get_fashion_filt(); // 活动筛选

    row=table.insertRow(0)

    for( let i of ls[0]){ // 表头
        let td=document.createElement('th');
        td.className='main_table_head'
        td.innerText=i
        row.insertAdjacentElement('beforeend',td)

    }
    // console.log(ls)
    for (let i=1;i<ls.length;i++){
        row=table.insertRow(-1)
        for (let t of ls[i]){
            let td=document.createElement('td');
            td.className='main_table_data'
            if (typeof(t)==='string'){
                td.innerText=t
            }else{
                let tmp=[];
                // console.log(fashion_filt)
                // console.log(t)
                for (let j of t){

                    // console.log(j)

                    if (fashion_filt.includes(j)){
                        let t=get_html_fashion(j,'a');
                        // console.log(t)
                        // console.log(typeof t)
                        // tmp.push(j)
                        tmp.push(t)
                    }
                }
            // td.innerText=tmp.join('|')
                td.innerHTML=tmp.join(' | ')
                // console.log(td)
                // console.log(typeof td)
            }
            row.insertAdjacentElement('beforeend',td)
            // row.insertAdjacentHTML('beforeend',td)
            // console.log(row)

        }
    }
    document.querySelector('div#main_table_div').insertAdjacentElement("beforeend", table)
}

function get_html_fashion(fashion_name,t){
    // 根据设置获取表格中的显示内容
    // fashion_name 为流行的名称
    // t为显示模式,悬浮显示或小字显示或只显示名称
    let info; // 具体的流行商品
    for (let i in fashion_info_dict){
        if (fashion_info_dict[i]['name']===fashion_name){
            info=fashion_info_dict[i]['detail'].join(',')
        }
    }
    if (t==='only_name'){
        return fashion_name; // 仅文字
    }
    if (t === 'small_info') { // 大小字
        return `<b style="font-size: 15px">${fashion_name}</b>:<small style="font-size: 3px">${info}</small>`
    }
    if (t){// 默认

        return `<abbr title="${info}" >${fashion_name}</abbr>`
    }
}


function all_sel(div){
    for (let i of div.querySelectorAll('input')){
        if(i.type==='checkbox'){
            i.checked=true
        }
    }
}
function invert_sel(div){
    for (let i of div.querySelectorAll('input')){
        if(i.type==='checkbox'){
            i.checked= !i.checked
        }
    }
}
function apply_sel() {
    let tmp=[];
    let  div = document.querySelector('div#by_type');
for (let i of div.querySelectorAll('input')){
    if(i.type==='checkbox'){
        if (i.checked){
            tmp.push(i.value)
        }
    }
}

for (let i in fashion_info_dict){
    fashion_info_dict[i]['show']=false
    for (let j of fashion_info_dict[i]['detail']){
        if (tmp.includes(j)){
            fashion_info_dict[i]['show']=true
            // 或者可以在这里修改上面div的复选框
            break;
        }
    }
}
    // console.log(fashion_info_dict)
    init_fashion_by_name_fill_div() // 应用筛选
    document.querySelector('input#fill_fashion_by_name').click()
}

function init_zone_fill_div(){
    // 初始化按地区筛选的选项框
    let div;
    div=document.querySelector('div#hidden_by_zone');

    // 先检查删除原有的子节点
    div.innerHTML='<br><br>'

    let all_sel_bnt=document.createElement('input');
    all_sel_bnt.type='submit'
    all_sel_bnt.value='全选'
    all_sel_bnt.id='zone_all_sel_bnt'
    all_sel_bnt.addEventListener('click',function (){all_sel(div)})
    div.insertAdjacentElement('beforeend',all_sel_bnt)

    let invert_sel_bnt=document.createElement('input');
    invert_sel_bnt.type='submit'
    invert_sel_bnt.value='反选'
    invert_sel_bnt.id='zone_invert_sel_bnt'
    invert_sel_bnt.addEventListener('click',function (){invert_sel(div)})
    div.insertAdjacentElement('beforeend',invert_sel_bnt)
    div.insertAdjacentElement('beforeend',document.createElement('br'))

    for (let i in map_list){
        let label;
        let checkbox;
        label=document.createElement('label')
        label.innerText=map_list[i]['name']
        label.id='label_'+map_list[i]['name']
        checkbox=document.createElement('input')
        checkbox.type='checkbox'
        checkbox.value=i
        checkbox.checked=map_list[i]['show']
        checkbox.id='cb_'+map_list[i]['name']
        label.appendChild(checkbox)
        div.insertAdjacentElement('beforeend',label)
        if ((i+1)%3===0){
            div.insertAdjacentElement('beforeend',document.createElement('br'))
        }
    }
}

function init_fashion_by_name_fill_div() {
    // 初始化按兴趣名筛选的选项框
    let div;
    div = document.querySelector('div#by_name');
    // 先检查删除原有的子节点
    div.innerHTML=''
    let all_sel_bnt = document.createElement('input');
    all_sel_bnt.type = 'submit'
    all_sel_bnt.value = '全选'
    all_sel_bnt.id = 'fashion_name_all_sel_bnt'
    all_sel_bnt.addEventListener('click', function () {
        all_sel(div)
    })
    div.insertAdjacentElement('beforeend', all_sel_bnt)

    let invert_sel_bnt = document.createElement('input');
    invert_sel_bnt.type = 'submit'
    invert_sel_bnt.value = '反选'
    invert_sel_bnt.id = 'fashion_name_invert_sel_bnt'
    invert_sel_bnt.addEventListener('click', function () {
        invert_sel(div)
    })
    div.insertAdjacentElement('beforeend', invert_sel_bnt)
    div.insertAdjacentElement('beforeend', document.createElement('br'))


    for (let i in fashion_info_dict){
        let label;
        let checkbox;
        label=document.createElement('label')
        label.innerText=fashion_info_dict[i]['name']
        label.id='label_'+fashion_info_dict[i]['name']
        checkbox=document.createElement('input')
        checkbox.type='checkbox'
        checkbox.value=fashion_info_dict[i]['name']
        checkbox.checked=fashion_info_dict[i]['show']

        checkbox.id='cb_'+fashion_info_dict[i]['name']
        label.appendChild(checkbox)
        div.insertAdjacentElement('beforeend',label)
        if ((i+1)%3===0){
            div.insertAdjacentElement('beforeend',document.createElement('br'))
        }
    }

}

function init_fashion_by_type_fill_div() {
    // 初始化按商品类型筛选的选项框
    let div;
    div = document.querySelector('div#by_type');
    // // 先检查删除原有的子节点
    // div.innerHTML=''
    let all_sel_bnt = document.createElement('input');
    all_sel_bnt.type = 'submit'
    all_sel_bnt.value = '全选'
    all_sel_bnt.id = 'fashion_type_all_sel_bnt'
    all_sel_bnt.addEventListener('click', function () {
        all_sel(div)
    })
    div.insertAdjacentElement('beforeend', all_sel_bnt)

    let invert_sel_bnt = document.createElement('input');
    invert_sel_bnt.type = 'submit'
    invert_sel_bnt.value = '反选'
    invert_sel_bnt.id = 'fashion_type_invert_sel_bnt'
    invert_sel_bnt.addEventListener('click', function () {
        invert_sel(div)
    })
    div.insertAdjacentElement('beforeend', invert_sel_bnt)


    let apply_sel_bnt = document.createElement('input');
    apply_sel_bnt.type = 'submit'
    apply_sel_bnt.value = '应用'
    apply_sel_bnt.id = 'fashion_type_apply_sel_bnt'
    apply_sel_bnt.addEventListener('click', function () {
        apply_sel()
    })
    div.insertAdjacentElement('beforeend', apply_sel_bnt)
    div.insertAdjacentElement('beforeend', document.createElement('br'))

    let tmp=[];

    for (let j in fashion_info_dict){
        for (let i of fashion_info_dict[j]['detail']){

            if (! tmp.includes(i)){
        let label;
        let checkbox;
        label=document.createElement('label')
        label.innerText=i
        label.id='label_'+i
        checkbox=document.createElement('input')
        checkbox.type='checkbox'
        checkbox.value=i
        checkbox.checked=true
        checkbox.id='cb_'+i
        label.appendChild(checkbox)
        div.insertAdjacentElement('beforeend',label)
                tmp.push(i)
        if (tmp.length%3===0){
            div.insertAdjacentElement('beforeend',document.createElement('br'))
        }

    }}}

}

function raido_fill_fashion_by_name(){
    document.querySelector('div#by_type').hidden=true
    document.querySelector('div#by_name').hidden=false
}
function raido_fill_fashion_by_type(){
    document.querySelector('div#by_type').hidden=false
    document.querySelector('div#by_name').hidden=true
}

function set_div_hidden(){
    document.querySelector('div#set_div').hidden=!document.querySelector('div#set_div').hidden
}